// tsx 中使用 v-slot
import { reactive } from "vue";

const state = reactive({ name: "张三" });
const list = reactive([1, 2, 3]);

const tsxDom = (props: any, ctx: any) => (
  <>
    {/* 默认插槽 */}
    <div>{ctx.slots.default ? ctx.slots.default() : "默认"}</div>
    {/* 声明名称为state的插槽 并传值，不传值为ctx.slots.state() */}
    <div>{ctx.slots.state && ctx.slots.state(state)}</div>
    {/* 声明名称为list的插槽 并传值，不传值为slots.list() */}
    <div>{ctx.slots.list && ctx.slots.list(list)}</div>
  </>
);

export default tsxDom;
